<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab切换插件-Jquery插件库-林氏智造</title>
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/ui.css" rel="stylesheet" />
		<link href="css/shCoreDefault.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
		<script type="text/javascript" src="js/shCore.js"></script>
		<script type="text/javascript" src="js/shBrushCSharp.js"></script>
		<script type="text/javascript">SyntaxHighlighter.all();</script>
		<script type="text/javascript" src="js/lin_tab.1.0.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#demo1').lin_tab();
				$('#demo2').lin_tab({
        				callback:function(index){
        					alert("这是实例二-回调函数，当前所选index="+index);
        				}
        			});
        			$('#demo3').lin_tab({
        				tabNavBtn:'.change',
        				eventType:'mouseenter'
        			});
			});
		</script>
	</head>
	<body>
		
		<div class="slidebar">
            <a href="http://www.0773linji.com" title="林氏智造" class="logo">林氏智造</a>
			<div class="slidebar_title">Jquery<span class="ver">插件库</span></div>
            <iframe src="../menu.html" frameborder="0"></iframe>
		</div>
		
		<div class="content">
			
			<div class="caption"><h2>tab切换插件</h2><span class="file">Define in : lin_tab.1.0.js</span></div>
			
			<div class="mod_desc">
        			<p>tab切换效果的实现应该算jquery插件入门教学，通过获取按钮元素和内容元素后，监听按钮元素的单击事件获取当前按钮的下标值，通过eq获取相同下标的内容元素让其显示。</p>
    			</div>
    			
    			<h3 class="title_lv2">
    				$('<span>target</span>').lin_tab([ <em>options</em> ]);
    			</h3>
    			
    			<dl class="deps">
        			<dt>依赖</dt>
        			<dd>JS : jquery-1.10.0.min.js</dd>
        			<dd>CSS : ui.css</dd>
        			<dd>浏览器 : ie7+</dd>
    			</dl>
    			
    			<div class="params_box">
				<h5>参数</h5>
				<ul class="params_list">
					<li>
						<dl>
							<dt>target</dt>
							<dd>String</dd>
						</dl>
						<div class="params_desc">
							<span class="type required">必需</span>
							<p>target DOM元素ID或者DOM元素class,对匹配元素进行插件绑定。</p>
						</div>
					</li>
					<li>
						<dl>
							<dt>options</dt>
							<dd>Object</dd>
						</dl>
						<div class="params_desc">
							<span class="type optional">可选</span>
							<p>多选形式的可配置参数。</p>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="article_box">
        			<p>下表列出了options参数介绍。</p>
    			</div>
    			
    			<table class="props_tb">
        <colgroup>
            <col style="width:130px">
            <col style="width:100px">
            <col style="width:70px">
            <col style="width:370px">
        </colgroup>
        <thead>
            <tr class="even">
                <th>参数</th>
                <th>数据类型</th>
                <th>默认值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b class="name">tabNavObj</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">.lin_tab_nav</span></td>
                <td class="t_l">
                    <p>切换按钮包含对象</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">tabNavBtn</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">li</span></td>
                <td class="t_l">
                    <p>切换按钮,可以是标签名或者类名</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">tabContentObj</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">.lin_tab_content</span></td>
                <td class="t_l">
                    <p>切换内容包含对象</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">tabContent</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">.lin_tab_content_sub</span></td>
                <td class="t_l">
                    <p>切换内容,可以是标签名或者类名</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">currentClass</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">current</span></td>
                <td class="t_l">
                    <p>当前样式。</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">prevBtn</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">.lin_prev_btn</span></td>
                <td class="t_l">
                    <p>上一个按钮,可以是标签ID或者类名</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">nextBtn</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">.lin_nextBtn</span></td>
                <td class="t_l">
                    <p>下一个按钮,可以是标签ID或者类名</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">eventType</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">click</span></td>
                <td class="t_l">
                    <p>绑定事件类型</p>
                    <p><b>click</b> 单击</p>
                    <p><b>mouseenter</b> 鼠标经过</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">callback</b></td>
                <td><span class="type">Function</span></td>
                <td><span class="normal">null</span></td>
                <td class="t_l">
                    <p>回调函数,function(index){}</p>
                    <p><b>index</b> 当前选择元素的下标值</p>
                </td>
            </tr>
        </tbody>
    </table>
    
    
    <div class="example_box">
        <h5>例子一：基本调用</h5>
        <p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">.lin_tab{border:1px solid #d1d1d1; width:220px;}
.lin_tab_nav li{float:left; display:inline; height:29px; line-height:29px; background-color:#efefef; width:110px; text-align:center; border-bottom:1px solid #d1d1d1;}
.lin_tab_nav li.current{background-color:#666; color:#FFF; border-bottom:none; height:30px;}
.lin_tab_content_sub{padding:10px; display:none;}</pre>
        </div>
        <p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$('#demo1').lin_tab();</pre>
        </div>
        
        <div class="demo_box">
            
            	<div class="lin_tab" id="demo1">
            		<ul class="lin_tab_nav clearfix">
                		<li>林氏智造</li>
                		<li>jquery插件大全</li>
                	</ul>
                <div class="lin_tab_content">
                		<div class="lin_tab_content_sub">林氏智造-专注网站建设,用智力创造生活</div>
                  	<div class="lin_tab_content_sub">jquery插件大全</div>
          		</div>
      		</div>
            
        </div>
        
    </div>
    
    <div class="example_box">
        <h5>例子二：函数回调</h5>
        <p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">.lin_tab{border:1px solid #d1d1d1; width:220px;}
.lin_tab_nav li{float:left; display:inline; height:29px; line-height:29px; background-color:#efefef; width:110px; text-align:center; border-bottom:1px solid #d1d1d1;}
.lin_tab_nav li.current{background-color:#666; color:#FFF; border-bottom:none; height:30px;}
.lin_tab_content_sub{padding:10px; display:none;}</pre>
        </div>
        <p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$('#demo2').lin_tab({
        			callback:function(index){
        				alert("这是实例二-回调函数，当前所选index="+index);
        			}
        		});</pre>
        </div>
        
        <div class="demo_box">
            
            	<div class="lin_tab" id="demo2">
            		<ul class="lin_tab_nav clearfix">
                		<li>林氏智造</li>
                		<li>jquery插件大全</li>
                	</ul>
                <div class="lin_tab_content">
                		<div class="lin_tab_content_sub">林氏智造-专注网站建设,用智力创造生活</div>
                  	<div class="lin_tab_content_sub">jquery插件大全</div>
          		</div>
      		</div>
            
        </div>
        
    </div>
    
    <div class="example_box">
        <h5>例子三：左右按钮控制TAB切换</h5>
        <p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">.lin_tab_v2{width:330px;}
.lin_prev_btn,.lin_next_btn{width:19px; height:19px;float: right;margin-right: 10px;}
.lin_tab_v2 li{cursor:pointer;}</pre>
        </div>
        <p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$('#demo3').lin_tab({
        				tabNavBtn:'.change',
        				eventType:'mouseenter'
        			});</pre>
        </div>
        
        <div class="demo_box">
            
            	<div class="lin_tab lin_tab_v2" id="demo3">
            		<ul class="lin_tab_nav clearfix">
                		<li class="change">林氏智造</li>
                		<li class="change">jquery插件大全</li>
                		<li>
                        <a href="javascript:void(0);" class="lin_next_btn">></a>
                        <a href="javascript:void(0);" class="lin_prev_btn"><</a>
                		</li>
                	</ul>
                <div class="lin_tab_content">
                		<div class="lin_tab_content_sub">林氏智造-专注网站建设,用智力创造生活</div>
                  	<div class="lin_tab_content_sub">jquery插件大全</div>
          		</div>
      		</div>
            
        </div>
        
    </div>
    
    <div class="download">
        <h3>立即下载</h3>
        <div class="download_box">
            <a href="#" target="_blank" class="btn_download btn_download_wide">
                <span class="icon_box"><s class="icon_download"></s></span>
                <span class="title">lin_tab</span>
                <span class="version">version : 1.0</span>
            </a>
        </div>
    </div>
    
    <div class="download">
        <h3>联系我</h3>
        <div class="download_box">
           <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=317365887&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:317365887:53" alt="请注明通过林氏智造发现此QQ" title="请注明通过林氏智造发现此QQ"/></a>
        </div>
    </div>
			
			
		</div>
		
	</body>
</html>
